/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import DragSortingTable from '../../components/synergy/modelCreate/ModelCreateRules';
import ModelCreateList from '../../components/synergy/modelCreate/ModelCreateList';
import ModelCreateSearch from '../../components/synergy/modelCreate/ModelCreateSearch';
import ModelCreateModel from '../../components/synergy/modelCreate/ModelCreateModal';
import TablePagination from '../../components/common/TablePagination';
import { Form, Input, Row, Col, Select, Button, Card, Space, Steps, Radio, Tooltip, Popover, message, Tabs, } from 'antd';
import { history } from 'umi';
import style from '../index.css';
import styles from './index.less';
import { InfoCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { getScoreRuleList } from '../../services/synergy/modelCreateService';
import { throttle } from '../../utils/commonUtil';
const { TabPane } = Tabs;
const Option = Select.Option;
const { Step } = Steps;

const ModelCreatePage = props => {
  const { dispatch, modelCreateModel, globalModel } = props;

  const { modelCreateList, modelCreateLoading, total, modelCreateModalVisible, currentPage, pageSize, searchParams, isExpandSearch, dimensionList, applicationAreaList, industryList,
    current, selectedRowKeys, selected, modelId, list, selectedStringList, levestList, levestListClone, radioFlag } = modelCreateModel;
  const { userInfo, menuData, paneTabs } = globalModel;
  const [pIdFLag, usePIdFlag] = useState(null)
  const [form] = Form.useForm();
  const { setFieldsValue } = form;

  useEffect(() => {
    if (history.location.state) {
      dispatch({ type: 'modelCreateModel/updateState', payload: { current: 1, modelCreateModalVisible: false, modelId: history.location.state.id }, });
      dispatch({ type: 'modelCreateModel/indicatorRuleGetList', payload: { modelIds: history.location.state.id }, });
      // dispatch({ type: 'modelCreateModel/getScoreRuleList', payload: { modelId: history.location.state.id }, });
      getScoreRuleList({ modelId: history.location.state.id }).then(res => {
        if (res.code == 200) {
          let radio = 1
          let data = {}
          if (res.data.length > 0) {
            radio = res.data[0].maxValue || res.data[0].minValue ? 1 : 2
          }
          if (radio == 1) {
            data.radio = radio
            data.levelList = JSON.parse(JSON.stringify(res.data))
            data.levestList = JSON.parse(JSON.stringify(res.data))
            data.levelListClone = []
          } else {
            data.radio = radio
            data.levelList = []
            data.levelListClone = JSON.parse(JSON.stringify(res.data))
            data.levestListClone = JSON.parse(JSON.stringify(res.data))
          }
          dispatch({ type: 'modelCreateModel/updateState', payload: data, });
          setFieldsValue(data)
        }
      })
    } else {
      dispatch({
        type: 'modelCreateModel/updateState', payload: {
          current: 0, modelCreateModalVisible: true, modelId: null, selectedRowKeys: [], selected: [], list: [], selectedStringList: [], levestList: [], levestListClone: [],
        },
      });
      setFieldsValue({ radio: 1 })
    }
  }, [history.location.state])

  useEffect(() => {
    list.forEach(item => {
      if (item.type == "字符型") {
        let data = selectedStringList ? selectedStringList.filter(i => i.symbol == item.category) : []
        let index = -1
        let dataClone = item.ruleList.map((i, t) => {
          if (i.pid != "item000" && i.pid != "itemOther000") {
            return i
          } else if (i.pid == "itemOther000") {
            index = t
          }
        }).filter(i => !!i)
        if (data.length == dataClone.length && index !== -1) {
          item.ruleList.splice(index, 1)
        } else if (data.length !== dataClone.length && index == -1) {
          item.ruleList.push({
            indicatorId: item.indicatorId,
            weight: '',
            zId: item.pid,
            zType: item.type,
            score: '0',
            ifNullRule: '1',
            otherScore: '0',
            pid: "itemOther000"
          })
        }
        item.selectedList = dataClone.map(item => item.charValue)
      }
      if (item.type == "逻辑型") {
        let dataClone = item.ruleList.filter(i => i.pid != "item000" && i.pid != "itemOther000")
        item.selectedList = dataClone.map(item => item.booleanValue)
      }
    })
    dispatch({
      type: 'modelCreateModel/updateState',
      payload: { list: list },
    });
  }, [list, selectedStringList])

  const modelCreateModelProps = {
    modelCreateModalVisible,
    industryList,
    applicationAreaList,
    userInfo,
    onAdd: values => {
      dispatch({
        type: 'modelCreateModel/addModel',
        payload: values,
      });
    },
  };

  const modelCreateSearchProps = {
    isExpandSearch,
    dimensionList,
    applicationAreaList,
    onSearch: searchParams => {
      dispatch({ type: 'modelCreateModel/updateState', payload: { searchParams } });
      dispatch({ type: 'modelCreateModel/getListDatas', payload: searchParams, });
    },
    onReset: () => {
      dispatch({ type: 'modelCreateModel/getListDatas', payload: { searchParams: null } });
      dispatch({ type: 'modelCreateModel/getListDatas', payload: {}, });
    },
    onShowDetailSearch: () => {
      dispatch({
        type: 'modelCreateModel/updateState',
        payload: { isExpandSearch: !isExpandSearch },
      });
    },
  };

  const modelCreateListProps = {
    currentPage,
    pageSize,
    modelCreateList,
    modelCreateLoading,
    isExpandSearch,
    rowSelection: {
      selectedRowKeys,
      selected,
      onSelect: (record, selected,) => {
        if (!selected) {
          usePIdFlag(record.pid)
        }
      },
      onChange: (key, rows) => {
        let listClone = modelCreateList.map(item => item.pid)
        let list = selectedRowKeys.filter(item => listClone.indexOf(item) == -1)
        let keysClone = Array.from(new Set(list.concat(key)))
        let data = selected.filter(item => listClone.indexOf(item.pid) == -1)
        let dataClone = data.concat(rows)
        dispatch({ type: 'modelCreateModel/updateState', payload: { selectedRowKeys: keysClone, selected: dataClone, }, });
      },
    },
  };

  useEffect(() => {
    if (pIdFLag || pIdFLag === 0) {
      dispatch({
        type: 'modelCreateModel/updateState',
        payload: {
          selectedRowKeys: selectedRowKeys.filter(item => item !== pIdFLag),
          selected: selected.filter(item => item.pid !== pIdFLag),
        },
      });
    }
  }, [pIdFLag])

  const tablePaginationProps = {
    total,
    currentPage,
    pageSize,
    onPageChange: (currentPage, pageSize) => {
      dispatch({
        type: 'modelCreateModel/getListDatas',
        payload: { currentPage, pageSize, ...searchParams },
      });
    },
    onShowSizeChange: (currentPage, pageSize) => {
      dispatch({
        type: 'modelCreateModel/getListDatas',
        payload: { currentPage, pageSize, ...searchParams },
      });
    },
  };

  const back = () => {
    let key = list.map(item => item.pid)
    dispatch({
      type: 'modelCreateModel/updateState',
      payload: {
        current: current > 0 ? current - 1 : current,
        selectedRowKeys: key,
        selected: list,
      },
    });
  };

  const onReturn = (active) => {
    if (menuData) {
      const pathUrl = menuData.list.filter(item => active == item.key)[0];
      if (pathUrl) {
        const isExist = paneTabs.filter(item => item.key == pathUrl.key).length > 0 ? true : false;
        pathUrl.children ? delete pathUrl.children : null
        let obj = {}
        if (!isExist) {
          paneTabs.push(JSON.parse(JSON.stringify(pathUrl)));
          obj = {}
        } else {
          obj.layoutFlag = "/scmp" + pathUrl.url
          let i = null
          paneTabs.forEach((item, index) => {
            if (item.key == pathUrl.key) i = index
          });
          paneTabs.splice(i, 1, pathUrl)
        }
        history.push("/scmp" + pathUrl.url);
        dispatch({ type: 'globalModel/updateState', payload: { activeSideMenuKey: active, pageUrl: pathUrl.url, paneTabs, layoutFlag: obj }, });
      } else {
        message.info("您无此页面权限！");
      }
    }

  }

  const onFinish = values => {
    if (current == 1) {

      let weight = 0;
      list.forEach(item => {
        weight = weight + item.weight * 1
      })
      if (weight != 100) {
        message.warning('权重不为100%,请检查数据');
        return;
      }
      console.log(values, levestList, levestListClone)
      if (levestList.length == 0 && levestListClone.length == 0) {
        message.warning('请填写等级规则');
        return;
      }
      let listClone = []
      list.forEach(item => {
        let listScore = item.ruleList.filter(i => i.pid != "itemOther000")
        let indicatorRules = listScore.map(i => {
          i.modelId = modelId
          i.indicatorId = i.zId
          i.indicatorType = i.zType
          i.indicatorName = item.pname
          i.weight = item.weight
          return i
        })
        if (item.indicatorType == "字符型") {
          let listOtherScore = item.ruleList.filter(i => i.pid == "itemOther000")
          indicatorRules.map(i => {
            i.otherScore = listOtherScore.length > 0 ? listOtherScore[0].otherScore : 0
            return i
          })
        }
        listClone = listClone.concat(indicatorRules)
      })
      let data = radioFlag == 1 ? levestList : levestListClone
      console.log(data)
      data.map(item => {
        item.modelId = modelId
        return item
      })

      dispatch({
        type: 'modelCreateModel/indicatorRuleAdd',
        payload: { indicatorRules: listClone, modelLogicalRuleScoreList: data, callk: onReturn("modelRetrieval") },
      });
    }
    if (current == 0) {
      if (selected.length == 0) {
        return message.info('最少选择一个指标')
      }
      dispatch({
        type: 'modelCreateModel/insertModelIndicatorPool',
        payload: { params: { indicatorPoolModelList: selected, modelId: modelId }, list },
      });

      let pnameList = '';
      selected.forEach(item => {
        if (item.type == '字符型') {
          pnameList += item.category + ',';
        }
      });
      dispatch({ type: 'modelCreateModel/getByCode', payload: { dictValue: pnameList } });
    }
  };

  const onFormLayoutChange = (val, values) => {
    let data = {}
    values.levelList ? data.levestList = values.levelList : null
    values.levelListClone ? data.levestListClone = values.levelListClone : null
    data.radioFlag = values.radio
    dispatch({ type: 'modelCreateModel/updateState', payload: data, });
    setFieldsValue(values);
  };

  const handelChange = (e, index, key) => {
    list[index][e] = key;
    dispatch({
      type: 'modelCreateModel/updateState',
      payload: { list: list },
    });
  };

  const onChange = (e, key, index) => {
    list[index][key] = e;
    dispatch({
      type: 'modelCreateModel/updateState',
      payload: { list: list },
    });
  };

  const checkRules = index => {
    let item = list[index];
    if (item.type == '数值型') {
      let nowRuleMin =
        item.minValue == '' || item.minValue == undefined
          ? -1.7976931348623157e10308
          : Number(item.minValue);
      let nowRuleMax =
        item.maxValue == '' || item.maxValue == undefined
          ? 1.7976931348623157e10308
          : Number(item.maxValue);

      if (!(item.maxValue || item.minValue)) {
        message.warning('请至少填写一个值');
        return;
      }

      if (nowRuleMax < nowRuleMin) {
        message.warning('最小值不能大于最大值');
        return;
      }

      let overFlag = false;
      //最小值校验
      if (item.ruleList) {
        for (var i = 0; i < item.ruleList.length; i++) {
          if (
            item.ruleList[i].hasOwnProperty('minValue') ||
            item.ruleList[i].hasOwnProperty('maxValue')
          ) {
            if (item.ruleList[i].ifNullRule == 1) {
              let allRuleMin =
                item.ruleList[i].minValue === '' || item.ruleList[i].minValue == null
                  ? -1.7976931348623157e10308
                  : Number(item.ruleList[i].minValue);
              let allRuleMax =
                item.ruleList[i].maxValue === '' || item.ruleList[i].maxValue == null
                  ? 1.7976931348623157e10308
                  : Number(item.ruleList[i].maxValue);

              if (
                (nowRuleMin > allRuleMin && nowRuleMin < allRuleMax) ||
                (nowRuleMin <= allRuleMin && nowRuleMax > allRuleMax)
              ) {
                overFlag = true;
                break;
              }

              if (
                (nowRuleMax > allRuleMin && nowRuleMax < allRuleMax) ||
                (nowRuleMin < allRuleMin && nowRuleMax > allRuleMax)
              ) {
                overFlag = true;
                break;
              }
            }
          }
        }
      }

      if (overFlag) {
        message.warning('区间存在重复');
        return;
      }
    } else if (item.type == '逻辑型') {
      if (!item.booleanValue) {
        message.warning('请选择逻辑');
        return;
      }
    } else if (item.type == '字符型') {
      debugger;
      if (!item.charValue) {
        message.warning('请选择');
        return;
      }
    }

    if (!item.score) {
      message.warning('请输入分数');
      return;
    }

    if (!(item.score % 1 === 0)) {
      message.warning('分数需为整数');
      return;
    }

    return true;
  };

  const confirmAdd = index => {
    if (!checkRules(index)) {
      return;
    }

    if (!list[index]['ruleList']) {
      list[index]['ruleList'] = [];
    }

    if (list[index].type == '数值型') {
      list[index]['ruleList'].push({
        minValue: list[index].minValue,
        maxValue: list[index].maxValue,
        score: list[index].score,
        zType: list[index].type,
        pid: `item${list[index].pid}`,
        zId: list[index].pid,
        ifNullRule: '1',
      });
    }

    if (list[index].type == '字符型') {
      list[index]['ruleList'].push({
        charValue: list[index].charValue,
        score: list[index].score,
        zType: list[index].type,
        pid: `item${list[index].pid}`,
        zId: list[index].pid,
        ifNullRule: '1',
      });

    }

    if (list[index].type == '逻辑型') {

      list[index]['ruleList'].push({
        booleanValue: list[index].booleanValue,
        score: list[index].score,
        zType: list[index].type,
        pid: `item${list[index].pid}`,
        zId: list[index].pid,
        ifNullRule: '1',
      });
    }

    //重置
    list[index].booleanValue = '';
    list[index].score = '';
    list[index].charValue = '';
    list[index].minValue = '';
    list[index].maxValue = '';

    dispatch({
      type: 'modelCreateModel/updateState',
      payload: { list: JSON.parse(JSON.stringify(list)) },
    });
  };

  const content = (
    <div style={{ fontSize: '12px', padding: "10px" }}>
      <p>数值型：维护指标区间分值，若最小值、最大值</p>
      <p>为空，则无限制;指标分值一般为10分或100分</p>
      <p>制，可根据实际业务调整</p>
    </div>
  );

  const contentString = (
    <div style={{ fontSize: '12px', padding: "10px" }}>
      <p>字符型：维护指标对应类型分值，并可统一赋予</p>
      <p>其他类型分值；指标分值一般为10分或100分</p>
      <p>制，可根据实际业务调整</p>
    </div>
  );

  const contentFit = (
    <div style={{ fontSize: '12px', padding: "10px" }}>
      <p>逻辑型：根据指标描述是否符合，并维护对应分</p>
      <p>值；指标分值一般为10分或100分制，可根据</p>
      <p>实际业务调整</p>
    </div>
  );

  const deletIndicator = index => {
    list.splice(index, 1);
    dispatch({ type: 'modelCreateModel/updateState', payload: { list: list }, });

    let selectedRowKeys = [];
    list.forEach(item => {
      selectedRowKeys.push(item.pid);
    });

    dispatch({ type: 'modelCreateModel/updateState', payload: { selectedRowKeys: selectedRowKeys, selected: list, }, });
  };

  const onChangeOther = (obj, values, type) => {
    list.map(item => {
      if (item.indicatorId == obj.indicatorId) {
        item.ruleList.map(i => {
          if (type == "ifNullRule") {
            if (i.ifNullRule == 0) {
              i.score = values
            }
          } else {
            if (i.pid == "itemOther000") {
              i.otherScore = values
            }
          }
        })
      }
    })
    dispatch({ type: 'modelCreateModel/updateState', payload: { list: list }, });
  }

  const onDeleRules = (values) => {
    list.map(item => {
      if (item.indicatorId == values[0].indicatorId) {
        item.ruleList = values
      }
    })
    dispatch({ type: 'modelCreateModel/updateState', payload: { list: JSON.parse(JSON.stringify(list)) }, });
  }

  const debounceAddFun = throttle(onFinish, 3000)

  return (

    <div className={style.roomDiv} id="modelOuter">
      <Card>
        <div style={{ width: '100%', borderBottom: '1px solid #e1e1e1' }}>
          <Steps
            current={current}
            style={{ paddingTop: '20px', width: '70%', margin: '0 auto', paddingBottom: '20px' }}
          >
            <Step title="指标选择" />
            <Step title="模型逻辑构建" />
            <Step title="模型创建完成" />
          </Steps>
        </div>
        {current == 0 ? (
          <div>
            <ModelCreateModel {...modelCreateModelProps} />
            <ModelCreateSearch {...modelCreateSearchProps} />
            <ModelCreateList {...modelCreateListProps} />
            <TablePagination {...tablePaginationProps} />
          </div>
        ) : null}
        <Form
          onFinish={() => debounceAddFun()}
          autoComplete="off"
          form={form}
          initialValues={{ radio: '1' }}
          onValuesChange={onFormLayoutChange}
        >
          {current == 1 ? (
            <Card>
              <Tabs defaultActiveKey="1">
                <TabPane tab="指标规则构建" key="1">
                  {list.map((item, index) => (
                    <Row style={{ borderBottom: '1px solid #e1e1e1', padding: '20px 40px' }} justify="center" align="middle" key={"指标规则构建" + index}>
                      <Col span="12">
                        <Row gutter={20} wrap={false}>
                          <Col flex="105px">
                            <Space>
                              <DeleteOutlined style={{ fontSize: '20px', color: '#ccc' }} onClick={() => deletIndicator(index)} />
                              <div className={styles.labelName}>
                                <div>
                                  <div>指标</div>
                                  <div>名称</div>
                                </div>
                                <span style={{ fontSize: '38px' }}>{index + 1}</span>
                              </div>
                            </Space>
                          </Col>
                          <Col flex="auto">
                            <Row gutter={16}>
                              <Col span="18">
                                <div style={{ width: '100%', fontSize: '16px', color: '#30344B', fontWeight: 'bold', }} >
                                  {item.pname}
                                  <Tooltip title={item.computationalLogic} placement={'top'}>
                                    <InfoCircleOutlined style={{ color: 'orange', marginLeft: '10px', fontSize: "20px" }} />
                                  </Tooltip>
                                </div>
                              </Col>
                              <Col span="6">
                                <Space>
                                  <div>
                                    <Input placeholder="请输入权重" value={item.weight} onChange={e => { onChange(e.target.value, 'weight', index); }} />
                                  </div> %
                                </Space>
                              </Col>
                            </Row>
                            {item.type == '数值型' && (
                              <Row gutter={16} style={{ marginTop: "10px" }}>
                                <Col span="6">
                                  <Input placeholder="请输入" onChange={e => { onChange(e.target.value, 'minValue', index); }} value={item.minValue} />
                                </Col>
                                <Col span="6">
                                  <Input placeholder="请输入" onChange={e => { onChange(e.target.value, 'maxValue', index); }} value={item.maxValue} />
                                </Col>
                                <Col span="6">
                                  <Input placeholder="请输入分数" type="number" onChange={e => { onChange(e.target.value, 'score', index); }} value={item.score} />
                                </Col>
                                <Col span="6">
                                  <Space>
                                    <Button type="primary" onClick={() => confirmAdd(index)}> 确定 </Button>
                                    <Popover content={content} placement="bottomRight">
                                      <InfoCircleOutlined style={{ color: 'orange', marginLeft: '10px', fontSize: "20px" }} />
                                    </Popover>
                                  </Space>
                                </Col>
                              </Row>
                            )}
                            {item.type == '字符型' && (
                              <Row gutter={16} style={{ marginTop: "10px" }}>
                                <Col span="12">
                                  <Select style={{ width: '100%' }} placeholder="请输入" onChange={handelChange.bind(this, 'charValue', index)} value={item.charValue}  >
                                    {selectedStringList && selectedStringList.map((i, t) => {
                                      return i.symbol == item.category && (<Option key={i.dictValue + i.symbol + t + index} value={i.dictValue}
                                        disabled={item.selectedList.indexOf(i.dictValue) > -1} >  {i.dictValue} </Option>)
                                    })}
                                  </Select>
                                </Col>
                                <Col span="6">
                                  <Input placeholder="请输入分数" type="number" value={item.score} onChange={e => { onChange(e.target.value, 'score', index); }} />
                                </Col>
                                <Col span="6">
                                  <Space>
                                    <Button type="primary" onClick={() => confirmAdd(index)}> 确定 </Button>
                                    <Popover content={contentString} placement="bottomRight">
                                      <InfoCircleOutlined style={{ color: 'orange', fontSize: "20px" }} />
                                    </Popover>
                                  </Space>
                                </Col>
                              </Row>
                            )}
                            {item.type == '逻辑型' && (
                              <Row gutter={16} style={{ marginTop: "10px" }}>
                                <Col span="12">
                                  <Select value={item.booleanValue} style={{ width: '100%' }} placeholder="请输入" onChange={handelChange.bind(this, 'booleanValue', index)} >
                                    <Option value="1" disabled={item.selectedList.indexOf("1") > -1}> 是 </Option>
                                    <Option value="0" disabled={item.selectedList.indexOf("0") > -1}> 否 </Option>
                                  </Select>
                                </Col>
                                <Col span="6">
                                  <Input placeholder="请输入分数" type="number" onChange={e => { onChange(e.target.value, 'score', index); }} value={item.score} />
                                </Col>
                                <Col span="6">
                                  <Space>
                                    <Button type="primary" onClick={() => confirmAdd(index)}>确定</Button>
                                    <Popover content={contentFit} placement="bottomRight">
                                      <InfoCircleOutlined style={{ color: 'orange', fontSize: "20px" }} />
                                    </Popover>
                                  </Space>
                                </Col>
                              </Row>
                            )}
                          </Col>
                        </Row>
                      </Col>
                      <Col span="12">
                        {item.ruleList && (
                          <DragSortingTable
                            list={item.ruleList}
                            listIndex={index}
                            onChangeOther={onChangeOther}
                            onDeleRules={onDeleRules}
                          ></DragSortingTable>
                        )}
                      </Col>
                    </Row>
                  ))}
                </TabPane>
                <TabPane tab="等级规则构建" key="2">
                  <Form.Item
                    name={'radio'}
                    rules={[{ required: true, message: 'Missing first name' }]}
                  >
                    <Radio.Group>
                      <Radio value={1}>按取值</Radio>
                      <Radio value={2}>按比例</Radio>
                    </Radio.Group>
                  </Form.Item>
                  {form.getFieldValue('radio') == 1 ? (<Form.List name="levelList">
                    {(fields, { add, remove }) => (
                      <>
                        {fields.map((field, index0) => (
                          <Space align="baseline" key={"指标等级构建" + index0}
                            style={{ display: 'flex', marginBottom: 8, borderBottom: '1px solid #ccc', marginTop: '20px', }}>
                            <Space>
                              <Form.Item
                                {...field}
                                name={[field.name, 'minValue']}
                                fieldKey={[field.fieldKey, 'minValue']}
                                rules={[{ required: true, message: '请输入最小值' }]}
                              >
                                <Input placeholder="最小值" />
                              </Form.Item>
                              <Form.Item
                                {...field}
                                name={[field.name, 'maxValue']}
                                fieldKey={[field.fieldKey, 'maxValue']}
                                rules={[{ required: true, message: '请输入最大值' }]}
                              >
                                <Input placeholder="最大值" />
                              </Form.Item>
                            </Space>

                            <Form.Item
                              {...field}
                              label={'等级'}
                              name={[field.name, 'rank']}
                              fieldKey={[field.fieldKey, 'rank']}
                              rules={[{ required: true, message: '请输入等级' }]}
                            >
                              <Input placeholder="请输入等级" />
                            </Form.Item>

                            <Space
                              style={{
                                width: '600px',
                                backgroundColor: 'rgba(78, 164, 191, 0.08)',
                                height: '32px',
                                lineHeight: '32px',
                              }}
                            >
                              <span
                                style={{
                                  width: '200px',
                                  display: 'inline-block',
                                  marginLeft: '20px',
                                }}
                              >
                                {form.getFieldValue('levelList')[index0] &&
                                  (form.getFieldValue('levelList')[index0].minValue || form.getFieldValue('levelList')[index0].minValue == 0) &&
                                  form.getFieldValue('levelList')[index0].minValue + ' 至 '}
                                {form.getFieldValue('levelList')[index0] && form.getFieldValue('levelList')[index0].maxValue}
                              </span>

                              {form.getFieldValue('levelList')[index0] && <span>等级：</span>}
                              {form.getFieldValue('levelList')[index0] && form.getFieldValue('levelList')[index0].rank}
                            </Space>

                            <Button type="link" onClick={() => remove(field.name)}>
                              删除
                            </Button>
                          </Space>
                        ))}
                        <Form.Item>
                          <Button type="dashed" onClick={() => add()} block>
                            新增
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List>) : (<Form.List name="levelListClone">
                    {(fields, { add, remove }) => (
                      <>
                        {fields.map((field, index0) => (
                          <Space align="baseline" key={"指标等级构建" + index0}
                            style={{ display: 'flex', marginBottom: 8, borderBottom: '1px solid #ccc', marginTop: '20px', }}>
                            <Space>
                              <Form.Item
                                {...field}
                                name={[field.name, 'minPercent']}
                                fieldKey={[field.fieldKey, 'minPercent']}
                                rules={[{ required: true, message: '请输入最小值' }]}
                              >
                                <Input placeholder="最小值" />
                              </Form.Item>
                              <Form.Item
                                {...field}
                                name={[field.name, 'maxPercent']}
                                fieldKey={[field.fieldKey, 'maxPercent']}
                                rules={[{ required: true, message: '请输入最大值' }]}
                              >
                                <Input placeholder="最大值" />
                              </Form.Item>
                            </Space>

                            <Form.Item
                              {...field}
                              label={'等级'}
                              name={[field.name, 'rank']}
                              fieldKey={[field.fieldKey, 'rank']}
                              rules={[{ required: true, message: '请输入等级' }]}
                            >
                              <Input placeholder="请输入等级" />
                            </Form.Item>

                            <Space
                              style={{
                                width: '600px',
                                backgroundColor: 'rgba(78, 164, 191, 0.08)',
                                height: '32px',
                                lineHeight: '32px',
                              }}
                            >
                              <span
                                style={{
                                  width: '200px',
                                  display: 'inline-block',
                                  marginLeft: '20px',
                                }}
                              >
                                {form.getFieldValue('levelListClone')[index0] &&
                                  (form.getFieldValue('levelListClone')[index0].minPercent || form.getFieldValue('levelListClone')[index0].minPercent == 0) &&
                                  form.getFieldValue('levelListClone')[index0].minPercent + ' 至 '}
                                {form.getFieldValue('levelListClone')[index0] && form.getFieldValue('levelListClone')[index0].maxPercent}
                              </span>

                              {form.getFieldValue('levelListClone')[index0] && <span>等级：</span>}
                              {form.getFieldValue('levelListClone')[index0] && form.getFieldValue('levelListClone')[index0].rank}
                            </Space>

                            <Button type="link" onClick={() => remove(field.name)}>
                              删除
                            </Button>
                          </Space>
                        ))}
                        <Form.Item>
                          <Button type="dashed" onClick={() => add()} block>
                            新增
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List>)}

                  {/* <Form.List name="levelList">
                     {(fields, { add, remove }) => (
                      <>
                        {fields.map((field, index0) => (
                          <Space align="baseline" key={"指标等级构建" + index0}
                            style={{ display: 'flex', marginBottom: 8, borderBottom: '1px solid #ccc', marginTop: '20px', }}>
                            {form.getFieldValue('radio') == 1 ? (
                              <Space>
                                <Form.Item
                                  {...field}
                                  name={[field.name, 'minValue']}
                                  fieldKey={[field.fieldKey, 'minValue']}
                                  rules={[{ required: true, message: '请输入最小值' }]}
                                >
                                  <Input placeholder="最小值" />
                                </Form.Item>
                                <Form.Item
                                  {...field}
                                  name={[field.name, 'maxValue']}
                                  fieldKey={[field.fieldKey, 'maxValue']}
                                  rules={[{ required: true, message: '请输入最大值' }]}
                                >
                                  <Input placeholder="最大值" />
                                </Form.Item>
                              </Space>
                            ) : (
                              <Space>
                                <Form.Item
                                  {...field}
                                  name={[field.name, 'minPercent']}
                                  fieldKey={[field.fieldKey, 'minPercent']}
                                  rules={[{ required: true, message: '请输入最小值' }]}
                                >
                                  <Input placeholder="最小值" />
                                </Form.Item>
                                <Form.Item
                                  {...field}
                                  name={[field.name, 'maxPercent']}
                                  fieldKey={[field.fieldKey, 'maxPercent']}
                                  rules={[{ required: true, message: '请输入最大值' }]}
                                >
                                  <Input placeholder="最大值" />
                                </Form.Item>
                              </Space>
                            )}

                            <Form.Item
                              {...field}
                              label={'等级'}
                              name={[field.name, 'rank']}
                              fieldKey={[field.fieldKey, 'rank']}
                              rules={[{ required: true, message: '请输入等级' }]}
                            >
                              <Input placeholder="请输入等级" />
                            </Form.Item>

                            <Space
                              style={{
                                width: '600px',
                                backgroundColor: 'rgba(78, 164, 191, 0.08)',
                                height: '32px',
                                lineHeight: '32px',
                              }}
                            >
                              {form.getFieldValue('radio') == 1 ? (
                                <span
                                  style={{
                                    width: '200px',
                                    display: 'inline-block',
                                    marginLeft: '20px',
                                  }}
                                >
                                  {form.getFieldValue('levelList')[index0] &&
                                    (form.getFieldValue('levelList')[index0].minValue || form.getFieldValue('levelList')[index0].minValue == 0) &&
                                    form.getFieldValue('levelList')[index0].minValue + ' 至 '}
                                  {form.getFieldValue('levelList')[index0] && form.getFieldValue('levelList')[index0].maxValue}
                                </span>
                              ) : (
                                <span
                                  style={{
                                    width: '200px',
                                    display: 'inline-block',
                                    marginLeft: '20px',
                                  }}
                                >
                                  {form.getFieldValue('levelList')[index0] &&
                                    (form.getFieldValue('levelList')[index0].minPercent || form.getFieldValue('levelList')[index0].minPercent == 0) &&
                                    form.getFieldValue('levelList')[index0].minPercent + ' 至 '}
                                  {form.getFieldValue('levelList')[index0] && form.getFieldValue('levelList')[index0].maxPercent}
                                </span>
                              )}

                              {form.getFieldValue('levelList')[index0] && <span>等级：</span>}
                              {form.getFieldValue('levelList')[index0] && form.getFieldValue('levelList')[index0].rank}
                            </Space>

                            <Button type="link" onClick={() => remove(field.name)}>
                              删除
                            </Button>
                          </Space>
                        ))}
                        <Form.Item>
                          <Button type="dashed" onClick={() => add()} block>
                            新增
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List> */}
                </TabPane >
              </Tabs >
            </Card >
          ) : null}

          <div style={{ float: 'right', padding: '10px 30px' }}>
            <Space>
              {current > 0 ? (
                <Form.Item style={{ marginBottom: "0" }}>
                  <Button onClick={() => back()} style={{ marginRight: '20px' }}>
                    上一步
                  </Button>
                </Form.Item>
              ) : null}

              {current <= 2 ? (
                <Form.Item style={{ marginBottom: "0" }}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ backgroundColor: '#3095B4', color: 'white' }}
                  >
                    下一步
                  </Button>
                </Form.Item>
              ) : null}
            </Space>
          </div>
        </Form >
      </Card >
    </div >

  );
};

function mapStateToProps({ globalModel, modelCreateModel }) {
  return { globalModel, modelCreateModel };
}

export default connect(mapStateToProps)(ModelCreatePage);
